<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../public/css/base.css">
    <link rel="stylesheet" href="../public/css/header.css">
    <link rel="stylesheet" href="../public/css/playlist-main.css">
    <link rel="stylesheet" href="../public/css/pagination.css">
    <link rel="stylesheet" href="../public/css/footer.css">
</head>

<body>
    <!-- 顶部导航条 -->
    <header class="header">
        <div class="m-top">
            <div class="wrap f-nb">
                <div class="l-top">
                    <h1><a href="#" class="logo">网易云音乐</a></h1>
                    <div class="n-top">
                        <ul class="m-nav">
                            <li>
                                <span>

                                    <a href="#" class="fst">发现音乐</a>
                                    <sup class="sanjiao show"></sup>
                            </li>
                            <li>
                                <a href="#">我的音乐</a>
                                <sup class="sanjiao hide"></sup>
                            </li>
                            <li><a href="#">朋友</a></li>
                            <li><a href="#">商城</a></li>
                            <li>
                                <a href="#">音乐人</a>
                            </li>
                            <li class="download_c">
                                <a href="#">下载客户端</a>
                                <sup class="sanjiao hide"></sup>
                                <sup class="hot">&nbsp;</sup>
                            </li>
                        </ul>

                    </div>

                </div>
                <div class="r-top">
                    <div class="log"><a href="#" class="login">登录</a></div>
                    <a href="#" class="creater">创作者中心</a>
                    <div class="search">
                        <span class="parent">
                            <input type="text" class="s_btn" placeholder="音乐/视频/电台/用户">
                        </span>
                    </div>
                </div>
            </div>

        </div>
        <div class="subnav">
            <div class="wrap f-pr">
                <ul class="nav">
                    <li>
                        <a href="./index.html" class="">
                            &nbsp;&nbsp;推荐&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;排行榜&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="./playlist.html" class="songList click">
                            &nbsp;&nbsp;歌单&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;主播电台&nbsp;&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;歌手&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;新碟上架&nbsp;&nbsp;
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <div class="main-wrap">
        <div class="main">
            <div class="classify_title">
                <div class="classify_title_left pull-left">
                    <p class="pull-left">

                    </p>
                    <a href="javascript:;" class="menu_btn">
                        <span>选择分类
                            <em></em>
                        </span>
                    </a>
                    <div class="cateListBox hide">
                        <div class="cateListBox_title">
                            <i class="cateListBox_title_icn"></i>
                        </div>
                        <div class="cateListBox_bg cateListBox_body">
                            <h3>
                                <a href="javascript:;">
                                    <span>全部风格</span>
                                </a>
                            </h3>
                            <dl class="f-nb">
                                <dt>
                                    <i class="u-icn u-icn-1"></i>
                                    语种
                                </dt>
                                <dd>
                                </dd>
                            </dl>
                            <dl class="f-nb">
                                <dt>
                                    <i class="u-icn u-icn-2"></i>
                                    风格
                                </dt>
                                <dd>

                                </dd>
                            </dl>
                            <dl class="f-nb">
                                <dt>
                                    <i class="u-icn u-icn-3"></i>
                                    场景
                                </dt>
                                <dd>

                                </dd>
                            </dl>
                            <dl class="f-nb">
                                <dt>
                                    <i class="u-icn u-icn-4"></i>
                                    情感
                                </dt>
                                <dd>

                                </dd>
                            </dl>
                            <dl class="f-nb">
                                <dt>
                                    <i class="u-icn u-icn-5"></i>
                                    主题
                                </dt>
                                <dd class="ddLast">

                                </dd>
                            </dl>
                        </div>
                        <div class="cateListBox_bg cateListBox_ft">

                        </div>
                    </div>
                </div>
                <div class="classify_title_right pull-right">
                    <a href="#">热门</a>
                </div>

            </div>
            <ul class="classify_song clearfix">
                <!-- <li>
                    <div class="songD">
                        <a href="#">
                            <div class="msk_img"></div>
                            <img src="../public/upload/h_img1.jpg" alt="">
                        </a>
                        <div class="songD_bottom">
                            <div class="songD_bottom_con">
                                <div class="songD_bottom_con_ep pull-left">
                                    <div class="songD_bottom_con_ep_icon pull-left"></div>
                                    <p class="nb pull-left">23712</p>
                                </div>
                                <div class="songD_bottom_con_play pull-right">
                                    <a href="#"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <p class="song_desc f-thide">
                            【伤感纯音乐】难过需要释放

                        </p>
                    </a>
                    <p class="by">by <a href="javascript:;">咕噜咕噜v-</a><img src="../public/images/star1.png" alt=""></p>
                </li> -->
            </ul>
            <!-- 分页 -->
            <div class="paging-wrap">
                <center>
                    <div class="box" id="wrap1"></div>
                </center>

            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="footer">
        <div class="f-ft">
            <div class="copy">
                <p class="link">
                    <a href="#">服务条款</a>
                    <span class="line">|</span>
                    <a href="#">隐私政策</a>
                    <span class="line">|</span>
                    <a href="#">儿童隐私政策</a>
                    <span class="line">|</span>
                    <a href="#">版权投诉指引</a>
                    <span class="line">|</span>
                    <a href="#">意见反馈</a>
                    <span class="line">|</span>
                    <a href="#">广告合作</a>
                </p>
                <p class="shangbiaoTemp">网易公司版权所有©1997-2021&nbsp;&nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：<a href="#">浙网文[2021]
                        1186-054号</a></p>
                <p class="shangbiaoTemp">违法和不良信息举报电话：0571-89853516&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举报邮箱：<a
                        href="#">ncm5990@163.com</a></p>
                <p class="shangbiaoTemp"><a href="#">粤B2-20090191-18 工业和信息化部备案管理系统网站</a> &nbsp;&nbsp;&nbsp;<a
                        href="#"><span class="police"></span> 浙公网安备 33010902002564号</a></p>
            </div>
            <ul class="enter">
                <li>
                    <a href="#" class="f_logo f_logo_1"></a>
                    <span class="f_span f_span_1"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_2"></a>
                    <span class="f_span f_span_2"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_3"></a>
                    <span class="f_span f_span_3"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_4"></a>
                    <span class="f_span f_span_4"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_5"></a>
                    <span class="f_span f_span_5"></span>
                </li>
            </ul>
        </div>
    </footer>
</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../public/js/playlist_all.js"></script>
<script src="../public/js/pagination.js"></script>

<script type="text/javascript">
    var onPagechange = function (page) {
        console.log('当前点击页码', page);
        sessionStorage.setItem('currentPage', page);
        let limit = 35;
        let currentPage = sessionStorage.getItem('currentPage');
        let currentData = (currentPage - 1) * limit;
        let order = '';
        let pCounts = 0;
        let classify_song = $('.classify_song');
        let cateListBox_body = $('.cateListBox_body');
        let cateListBox_body_dt = $('.cateListBox_body>dl>dt');
        let classify_title_left_p = $('.classify_title_left>p');
        songRequest('http://localhost:3000/top/playlist', order, limit, currentData, sessionStorage.getItem('cat'))

        function songRequest(url, order, limit, currentData, cat) {
            $.ajax({
                url: url,
                data: {
                    order: order ? order : 'hot',
                    limit: limit,
                    offset: currentData,
                    cat: cat ? cat : '全部',
                },
                success: function (res) {
                    console.log(res);
                    classify_song.html('')
                    sessionStorage.setItem('cat', cat);
                    console.log(sessionStorage.getItem('cat'));
                    classify_title_left_p.html(`${sessionStorage.getItem('cat')}`)
                    res.playlists.forEach((el, index) => {
                        if (el.playCount > 100000) {
                            pCounts = (el.playCount / 10000).toFixed(0) + "万"
                        } else {
                            pCounts = el.playCount
                        }
                        classify_song.append(`<li>
                <div class="songD">
                    <a href="../views/playlistDetail.html?id=${el.id}">
                        <div class="msk_img"></div>
                        <img src="${el.coverImgUrl}" alt="">
                    </a>
                    <div class="songD_bottom">
                        <div class="songD_bottom_con">
                            <div class="songD_bottom_con_ep pull-left">
                                <div class="songD_bottom_con_ep_icon pull-left"></div>
                                <p class="nb pull-left">${pCounts}</p>
                            </div>
                            <div class="songD_bottom_con_play pull-right">
                                <a href="#"></a>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="../views/playlistDetail.html?id=${el.id}">
                    <p class="song_desc f-thide">
                        ${el.name}
                    </p>
                </a>
                <p class="by f-thide">by <a href="javascript:;" class="f-thide">${el.creator.nickname}</a></p>
            </li>`)
                        if (el.creator.avatarDetail !== null) {
                            let starli = $(`.classify_song li:nth-child(${index+1})`);
                            $(starli[0].children[2]).append(
                                `<img id="star_img" src="${el.creator.avatarDetail.identityIconUrl}" alt="">`
                            )
                        }
                    })

                }
            })
        }
    }
    var obj = {
        wrapid: 'wrap1', //页面显示分页器容器id
        total: 380, //总条数
        pagesize: 10, //每页显示10条
        currentPage: 1, //当前页
        onPagechange: onPagechange,
        // btnCount: 7 //页数过多时，显示省略号的边界页码按钮数量，可省略，且值是大于5的奇数
    }
    pagination.init(obj);
</script>

</html>